<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="onClickRight"></navBar>
    <div class="contentInner">
      <div class="con">
        <div class="bangding">
          <img src="../../assets/images/zichan/tip.png" alt="" />
          <span class="txt">{{ $t("绑定银行卡") }}</span>
        </div>
        <div class="title">{{ $t("姓名") }}</div>
        <input type="text" v-model="name" :placeholder="$t('请输入姓名')" />
        <div class="title">{{ $t("银行卡号") }}</div>
        <input
          type="text"
          v-model="banknum"
          :placeholder="$t('请输入银行卡号')"
        />
        <div class="title">{{ $t("银行名称") }}</div>
        <input
          type="text"
          v-model="bankname"
          :placeholder="$t('请输入银行名称')"
        />
        <div class="title">{{ $t("开户省市") }}</div>
        <input
          type="text"
          v-model="address"
          :placeholder="$t('请输入开户省市')"
        />
        <div class="title">{{ $t("开户网店") }}</div>
        <input
          type="text"
          v-model="wangdian"
          :placeholder="$t('请输入开户网店')"
        />
        <div class="title">{{ $t("身份id(护照)") }}</div>
        <input
          type="text"
          v-model="id"
          :placeholder="$t('请输入身份id(护照)')"
        />
        <div class="title">{{ $t("国际汇款代码") }}</div>
        <input
          type="text"
          v-model="daima"
          :placeholder="$t('请输入国际汇款代码')"
        />
        <div class="title">{{ $t("联系电话") }}</div>
        <input
          type="number"
          v-model="phone"
          :placeholder="$t('请输入联系电话')"
        />
      </div>
      <div class="btn">
        <van-button type="info" size="large" @click="sub">{{
          $t("提交")
        }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("绑定银行卡"),
        close: false,
        btn: "",
        isBlue: false,
      },
      name: "",
      banknum: "",
      bankname: "",
      address: "",
      wangdian: "",
      id: "",
      daima: "",
      phone: "",
    };
  },

  mounted() {},

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "onlineService",
      });
    },

    sub() {
      if (this.name == "") {
        this.$toast(this.$t("请输入姓名"));
        return;
      }
      if (this.banknum == "") {
        this.$toast(this.$t("请输入银行卡号"));
        return;
      }
      if (this.bankname == "") {
        this.$toast(this.$t("请输入银行名称"));
        return;
      }
      if (this.address == "") {
        this.$toast(this.$t("请输入开户省市"));
        return;
      }
      if (this.wangdian == "") {
        this.$toast(this.$t("请输入开户网点"));
        return;
      }
      if (this.id == "") {
        this.$toast(this.$t("请输入身份id(护照)"));
        return;
      }
      if (this.daima == "") {
        this.$toast(this.$t("请输入国际汇款代码"));
        return;
      }
      if (this.phone == "") {
        this.$toast(this.$t("请输入联系电话"));
        return;
      }
      $postAxios(
        api.addBank,
        {
          type: 1,
          name: this.name,
          bank_no: this.banknum,
          bank_name: this.bankname,
          province: this.address,
          network: this.wangdian,
          card_no: this.id,
          code: this.daima,
          mobile: this.phone,
        },
        (res) => {
          console.log(111, res);
          if (res.code == 0) {
            this.$toast(this.$t(res.msg));
            this.name = "";
            this.banknum = "";
            this.bankname = "";
            this.address = "";
            this.wangdian = "";
            this.id = "";
            thiis.daima = "";
            this.phone = "";
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: #ffffff;
  .emptyBox {
    width: 100%;
    height: 40px;
  }
  .contentInner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .con {
    width: 100%;
    padding: 20px 20px 80px;
    box-sizing: border-box;
    .bangding {
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      img {
        width: 12px;
        height: 12px;
      }
      .txt {
        font-size: 12px;
        color: #f60;
        padding-left: 5px;
      }
    }
    .title {
      // padding-bottom: 10px;
      font-size: 12px;
      color: #333333;
      font-weight: bold;
    }
    input {
      box-sizing: border-box;
      padding: 0 10px;
      width: 100%;
      height: 40px;
      border-radius: 2px;
      border: solid 0.5px #d8dce6;
      font-size: 12px;
      background-color: #ffffff;
      margin-bottom: 10px;
    }
  }
  .btn {
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 10px 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .van-button--large {
      height: 40px !important;
    }
  }
}
</style>
